import { useState, useEffect, FC } from 'react';
import Highcharts from 'highcharts/highstock';

interface HighChartsProps { }

const HighCharts: FC<HighChartsProps> = () => {
  const [option, setOption] = useState<any>({
    chart: {
      type: 'bar'                          //指定图表的类型，默认是折线图（line）
    },
    title: {
      text: '我的第一个图表'                 // 标题
    },
    xAxis: {
      categories: ['苹果', '香蕉', '橙子']   // x 轴分类
    },
    yAxis: {
      title: {
        text: '吃水果个数'                // y 轴标题
      }
    },
    series: [{                              // 数据列
      name: '小明',                        // 数据列名
      data: [1, 0, 4]                     // 数据
    }, {
      name: '小红',
      data: [5, 7, 3]
    }]
  })

  useEffect(() => {
    Highcharts.chart('container', option);
  })

  const changeData = () => {
    setOption({
      chart: {
        type: 'line'
      },
      title: {
        text: '月平均气温'
      },
      subtitle: {
        text: '数据来源: WorldClimate.com'
      },
      xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      },
      yAxis: {
        title: {
          text: '气温 (°C)'
        }
      },
      plotOptions: {
        line: {
          dataLabels: {
            // 开启数据标签
            enabled: true
          },
          // 关闭鼠标跟踪，对应的提示框、点击事件会失效
          enableMouseTracking: false
        }
      },
      series: [{
        name: '东京',
        data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
      }, {
        name: '伦敦',
        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
      }]
    })
  }
  return (
    <>
      <button onClick={changeData}>改变数据</button>
      <div id="container" style={{ width: 600, height: 400 }}></div>
    </>
  );
}

export default HighCharts;
